<template>
  <el-card class="table-card" shadow="never">
    <template #header>
      <div class="table-header">
        <div class="header-left">
          <span>库存列表</span>
          <el-tag type="info">{{ summary.productCount }} 种产品</el-tag>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button :icon="Sort" @click="handleSort('productName')">
              按产品排序
            </el-button>
            <el-button :icon="Sort" @click="handleSort('lastUpdate')">
              按更新时间排序
            </el-button>
          </el-button-group>
          
          <el-button 
            type="primary" 
            :icon="Operation" 
            @click="handleBatchOperations"
            :disabled="selectedItems.length === 0"
          >
            批量操作({{ selectedItems.length }})
          </el-button>
          
          <el-dropdown @command="handleMoreAction">
            <el-button :icon="Operation">
              更多操作
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="import" :icon="Upload">
                  导入库存
                </el-dropdown-item>
                <el-dropdown-item command="export" :icon="Download">
                  导出库存
                </el-dropdown-item>
                <el-dropdown-item command="inbound" :icon="Box" divided>
                  入库
                </el-dropdown-item>
                <el-dropdown-item command="outbound" :icon="Box">
                  出库
                </el-dropdown-item>
                <el-dropdown-item command="transfer" :icon="Operation">
                  调拨
                </el-dropdown-item>
                <el-dropdown-item command="sync" :icon="Refresh" divided>
                  同步库存
                </el-dropdown-item>
                <el-dropdown-item command="settings" :icon="Setting">
                  列设置
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </template>

    <el-table
      :data="inventoryItems"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @sort-change="handleSortChange"
      class="inventory-table"
      stripe
    >
      <el-table-column type="selection" width="50" />
      
      <!-- 产品基本信息 -->
      <el-table-column prop="basicInfo" label="产品信息" min-width="200" fixed>
        <template #default="{ row }">
          <div class="product-basic-cell">
            <div class="product-name-row">
              <span class="product-name">{{ row.productName }}</span>
              <el-tag 
                :type="getStatusType(row.status)"
                size="small"
                class="status-tag"
              >
                {{ getStatusText(row.status) }}
              </el-tag>
            </div>
            <div class="product-sku">
              SKU: {{ row.sku }}
            </div>
            <div class="product-spec">
              {{ row.specification }}
            </div>
          </div>
        </template>
      </el-table-column>
      
      <!-- 库存信息 -->
      <el-table-column prop="stockInfo" label="库存信息" width="150">
        <template #default="{ row }">
          <div class="stock-cell">
            <div class="stock-quantity">
              <span class="label">当前库存:</span>
              <span 
                class="value" 
                :class="{ 'low-stock': row.currentStock <= row.minStock }"
              >
                {{ row.currentStock }}
              </span>
              <span class="unit">{{ row.unit }}</span>
            </div>
            <div class="min-stock">
              <span class="label">最低库存:</span>
              <span class="value">{{ row.minStock }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      
      <!-- 库存范围 -->
      <el-table-column prop="stockRange" label="库存范围" width="120">
        <template #default="{ row }">
          <div class="stock-range">
            <div class="range-value">{{ row.minStock }} - {{ row.maxStock }}</div>
            <div class="unit">{{ row.unit }}</div>
          </div>
        </template>
      </el-table-column>
      
      <!-- 单位 -->
      <el-table-column prop="unit" label="单位" width="80" />
      
      <!-- 最后更新 -->
      <el-table-column prop="lastUpdate" label="最后更新" width="120" sortable>
        <template #default="{ row }">
          {{ formatDate(row.lastUpdate) }}
        </template>
      </el-table-column>
      
      <!-- 库存状态 -->
      <el-table-column prop="status" label="库存状态" width="110" sortable>
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)" size="small">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <div class="action-buttons">
            <el-button 
              type="primary" 
              link 
              :icon="Document" 
              @click.stop="viewDetail(row)"
            >
              详情
            </el-button>
            
            <el-button 
              type="warning" 
              link 
              :icon="Edit" 
              @click.stop="editItem(row)"
            >
              编辑
            </el-button>
            
            <el-dropdown 
              @command="(command: string) => handleMoreAction(command, row)"
            >
              <el-button type="info" link :icon="More" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="history" :icon="Document">
                    库存记录
                  </el-dropdown-item>
                  <el-dropdown-item command="adjust" :icon="ArrowDown">
                    库存调整
                  </el-dropdown-item>
                  <el-dropdown-item 
                    command="delete" 
                    :icon="Delete"
                    divided
                  >
                    删除记录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.limit"
        :total="pagination.total"
        :page-sizes="[20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
// @ts-nocheck
import { defineProps, defineEmits } from 'vue'
import { 
  Sort, Document, Edit, More, Delete, Refresh, 
  Download, Setting, Operation, ArrowDown, Upload, Box 
} from '@element-plus/icons-vue'
import { formatCurrency, formatDate } from '@/utils/formatters'

// 定义库存项接口
interface InventoryItem {
  id: number
  productId: number
  sku: string
  productName: string
  specification: string
  currentStock: number
  minStock: number
  maxStock: number
  unit: string
  lastUpdate: string
  status: string
  remark: string
}

// 定义汇总信息接口
interface InventorySummary {
  productCount: number
  totalValue: number
  warningCount: number
  outOfStockCount: number
}

// 定义分页接口
interface Pagination {
  page: number
  limit: number
  total: number
}

// 定义已选项接口
type SelectedItems = {
  id: number
  productName: string
}[]

const props = defineProps<{
  inventoryItems: InventoryItem[]
  loading: boolean
  summary: InventorySummary
  pagination: Pagination
  selectedItems: SelectedItems
}>()

const emit = defineEmits<{
  (e: 'selection-change', selection: InventoryItem[]): void
  (e: 'row-click', row: InventoryItem): void
  (e: 'sort-change', sort: { column: any, prop: string, order: string }): void
  (e: 'current-change', page: number): void
  (e: 'size-change', size: number): void
  (e: 'view-detail', item: InventoryItem): void
  (e: 'more-action', command: { action: string, row?: InventoryItem }): void
}>()

const handleSelectionChange = (selection: InventoryItem[]) => {
  emit('selection-change', selection)
}

const handleRowClick = (row: InventoryItem) => {
  emit('row-click', row)
}

const handleSortChange = (sort: { column: any, prop: string, order: string }) => {
  emit('sort-change', sort)
}

const handleSort = (field: string) => {
  // 触发排序事件
  emit('sort-change', { column: null, prop: field, order: 'ascending' })
}

const handleSizeChange = (size: number) => {
  emit('size-change', size)
}

const handleCurrentChange = (page: number) => {
  emit('current-change', page)
}

const viewDetail = (item: InventoryItem) => {
  emit('view-detail', item)
}

const editItem = (item: InventoryItem) => {
  // 编辑库存项
  emit('more-action', { action: 'edit', row: item })
}

const handleMoreAction = (command: string, row?: InventoryItem) => {
  if (row) {
    // 行级操作
    emit('more-action', { action: command, row })
  } else {
    // 表级操作
    emit('more-action', { action: command })
  }
}

const handleBatchOperations = () => {
  // 触发表级批量操作
  emit('more-action', { action: 'batch' })
}

// 工具函数
const getStatusType = (status: string) => {
  switch (status) {
    case 'sufficient': return 'success'
    case 'warning': return 'warning'
    case 'out_of_stock': return 'danger'
    default: return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'sufficient': return '充足'
    case 'warning': return '预警'
    case 'out_of_stock': return '缺货'
    default: return '未知'
  }
}
</script>

<style scoped>
.table-card {
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.product-basic-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-name {
  font-weight: 600;
  color: #1f2d3d;
}

.product-sku {
  font-size: 12px;
  color: #606266;
}

.product-spec {
  font-size: 12px;
  color: #606266;
}

.status-tag {
  height: 20px;
  line-height: 18px;
}

.stock-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stock-quantity {
  display: flex;
  align-items: center;
  gap: 4px;
}

.min-stock {
  display: flex;
  align-items: center;
  gap: 4px;
}

.label {
  font-size: 12px;
  color: #606266;
}

.value {
  font-weight: 500;
}

.value.low-stock {
  color: #f56c6c;
  font-weight: 600;
}

.unit {
  font-size: 12px;
  color: #606266;
}

.stock-range {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.range-value {
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>